<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布房源-基本信息</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/airent/common/css/nav.css}">
    <link rel="stylesheet" th:href="@{/airent/common/css/footer.css}">
    <link rel="stylesheet" th:href="@{/airent/css/issuehouse.css}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
    <link rel="icon" th:href="@{airent/common/imgs/icon.ico}" type="images/x-ico}"/>


    <!-- kartik-v-bootstrap -->
    <link rel="stylesheet" th:href="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/css/fileinput.min.css}"
          type="text/css">
    <link rel="stylesheet"
          th:href="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/themes/explorer-fas/theme.min.css}">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" crossorigin="anonymous">


</head>
<body>
<div id="app">
    <div th:replace="~{head/topbar::topBar}"></div>

    <!-- 发布房源 - 开始 -->
    <div class="issuehouse">

        <div class="big-tit">
            <div class="tit">修改出售房源</div>
            <div class="sub-tit">填写信息，Airent会尽快与您取得联系</div>
        </div>
        <div id="step-item-one" style="display: block;">
            <div class="inside-item">
                <div class="item-one" style="color: #01bc6a; border-bottom: 2px solid #01bc6a;">1.提交基本信息</div>
                <div class="item-two">2.提交详细信息</div>
            </div>
        </div>

        <div id="step-item-two" style="display: none;">
            <div class="inside-item">
                <div class="item-one">1.提交基本信息</div>
                <div class="item-two" style="color: #01bc6a; border-bottom: 2px solid #01bc6a;">2.提交详细信息</div>
            </div>
        </div>


        <div class="m-form">
            <!-- 第一个表单 - 开始 -->

            <div id="form-box-one" style="display: block;">
                <div class="midd-box">
                    <div class="row">
                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">

                                    <input  type="hidden" class="form-control all-input" v-model="house.houseId"
                                           style="width: 300px;">
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">手机号:</label>
                                    <input type="text" class="form-control all-input" v-model="house.tel" id="tel" onchange="checkTel()"
                                           style="width: 300px;" maxlength="11" oninput = "value=value.replace(/^1[^\d]/g,'')">
                                </div>
                            </form>
                        </div>


                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">小区名称:</label>
                                    <input type="text" class="form-control all-input" v-model="house.villageName"
                                           style="width: 300px;">
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">具体位置:</label>
                                    <input type="text" class="form-control all-input" v-model="house.detailedAddress"
                                           style="width: 300px;">
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">出租类型:</label>
                                    <select class="form-control all-input" v-model="house.rentType">
                                        <option value="合租">合租</option>
                                        <option value="整租">整租</option>
                                    </select>
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">押付方式:</label>
                                    <select class="form-control all-input" v-model="house.payment">
                                        <option value="不需要押金">不需要押金</option>
                                        <option value="押一付一">押一付一</option>
                                        <option value="押一付二">押一付二</option>
                                        <option value="押一付三">押一付三</option>
                                        <option value="其他">其他</option>
                                    </select>
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">期望租金:</label>
                                    <input type="text" class="form-control all-input" v-model="house.rentPrice" placeholder="单位：元"
                                           style="width: 300px;">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="m-submit">
                    <div class="submit-wrap">
                        <button type="button" id="showHidde_one" class="btn btn-success btn-lg">下一步</a></button>
                    </div>
                </div>
            </div>
            <!-- 第一个表单 - 结束 -->

            <!-- 第二个表单 - 开始 -->
            <div id="form-box-two" style="display: none;">
                <div class="midd-box">
                    <div class="row">
                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">房源标题:</label>
                                    <input type="text" class="form-control all-input" v-model="house.houseResource"
                                           placeholder="" style="width: 300px;">
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">房屋面积:</label>
                                    <input type="text" class="form-control all-input" v-model="house.houseMeasure"
                                           placeholder="单位：m^2" style="width: 300px;">
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">户型:</label>
                                    <input type="text" class="form-control all-input" v-model="house.houseType"
                                           placeholder="" style="width: 300px;">
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">楼层:</label>
                                    <input type="text" class="form-control all-input" v-model="house.floor"
                                           style="width: 300px;">
                                </div>
                            </form>
                        </div>


                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">起租日期:</label>
                                    <input type="text" class="form-control all-input" v-model="house.rentDate" id="usr"
                                           style="width: 300px;">
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="comment" class="label-cha">房源描述:</label>
                                    <textarea class="form-control all-input" rows="5" id="comment" v-model="house.content"
                                              style="width: 300px;"></textarea>
                                </div>
                            </form>
                        </div>


                    </div>
                </div>

                <div class="m-submit">
                    <div class="submit-wrap">
                        <button type="button" id="showHidde_two" class="btn btn-success btn-lg">上一步</a></button>
                        <!-- <button type="button" class="btn btn-success btn-lg">提交委托</button> -->

                        <button type="button" @click="updateHouse" class="btn btn-success btn-lg" data-toggle="modal"
                                data-target="#exampleModalCenter" >
                            修改
                        </button>

                    </div>
                </div>

            </div>

            <!-- 第二个表单 - 结束 -->
        </div>
    </div>
    <!-- 发布房源 - 结束 -->

    <!-- 底部 -->
    <div th:replace="~{food/bottombar::topBar}"></div>
</div>


<script th:src="@{/airent/plugins/jquery/jquery.min.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/plugins/piexif.min.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/plugins/sortable.min.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/plugins/purify.min.js}"></script>
<script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.bundle.min.js}"></script>
<!--<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/fileinput.min.js}"></script>-->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-fileinput/5.0.1/js/fileinput.min.js"></script>

<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/locales/LANG.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/locales/zh.js}"
        type="text/javascript"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/themes/fas/theme.min.js}"
        type="text/javascript"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/themes/explorer-fas/theme.min.js}"
        type="text/javascript"></script>
<script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js}"></script>


<script>

    var vueApp = new Vue({
        el: "#app",
        data: {

            tel: '',//预留电话
            villageName: "",//小区名字
            detailedAddress: "",
            rentType: "",//住房类型（合租/整租）
            rentPrice: 0,//价格
            houseType: '',
            houseMeasure: "",//面积
            houseResource: "",//标题
            rentDate: "",
            content:'',//房源描述
            payment:'',//押付方式
            house:{}
        },
        methods: {
            updateHouse: function () {
                let url = '/house/update',
                    data = {
                        houseId:this.house.houseId,
                        tel: this.house.tel,//预留电话
                        villageName: this.house.villageName,//小区名字
                        detailedAddress: this.house.detailedAddress,//所在单元,需要写个计算方法
                        rentType: this.house.rentType,//住房类型（合租/整租）
                        rentPrice: this.house.rentPrice,//价格
                        houseType: this.house.houseType,
                        houseMeasure: this.house.houseMeasure,//面积
                        houseResource: this.house.houseResource,//标题
                        rentDate: this.house.rentDate,
                        content:this.house.content,
                        payment:this.house.payment

                    }
                $.post(url, data, function (result) {
                    if(result>0){
                        alert("修改成功");
                        window.location.href="/houseCol/userInfo"
                    }else{
                        alert("修改失败");
                    }
                }, "json")
            },
            checkTel:function () {
                var tel=document.getElementById("#tel").val().length();
                if(tel!=11){
                    alert("请输入合法手机号");
                }

            }

        },
        computed:{

        },
        created() {
            let id = window.localStorage.getItem("id")

            // vueApp.houses=sessionStorage.getItem("house");
            /*var url='/house/updateHouse';

            $.get(url,function (data) {
                vueApp.house=data.list
            })*/
            $.get('/house/updateHouse',{
                hid:id
            },function (data) {
                vueApp.house = data
                console.log(data)
            })
            window.localStorage.removeItem("id");
        }


    })
</script>
<!-- div切换的js -->
<script type="text/javascript">
    function show_hidden(obj) {

        if (obj.style.display == "block") {
            obj.style.display = "none";
        } else {
            obj.style.display = "block";
        }
    }

    var sh1 = document.getElementById("showHidde_one");
    var sh2 = document.getElementById("showHidde_two");

    sh1.onclick = function () {

        var div1 = document.getElementById("form-box-one");
        var div2 = document.getElementById("form-box-two");

        var biao1 = document.getElementById("step-item-one");
        var biao2 = document.getElementById("step-item-two");


        show_hidden(div1);
        show_hidden(div2);

        show_hidden(biao1);
        show_hidden(biao2);
        return false;
    }

    sh2.onclick = function () {

        var div1 = document.getElementById("form-box-one");
        var div2 = document.getElementById("form-box-two");

        var biao1 = document.getElementById("step-item-one");
        var biao2 = document.getElementById("step-item-two");

        show_hidden(div1);
        show_hidden(div2);

        show_hidden(biao1);
        show_hidden(biao2);
        return false;
    }


</script>

<script>

    $(document).ready(function () {
        $("#input-703").fileinput({
                theme: 'fas',
                language: 'zh',
                uploadUrl: "/house/addImg", // 服务器端上传处理程序
                /*minFileCount: 1, //最小上传文件数为1
                maxFileCount: 5, //最大上传文件数为5
                multiple: false, //异步上传*/
                // uploadAsync: false,
                // showUpload : false
                // showUpload: true, //是否显示上传按钮
                // showRemove : true, //显示移除按钮
                // showPreview : true, //是否显示预览
                // showCaption: false,//是否显示标题
                // autoReplace : true,
                minFileCount: 0,
                uploadAsync: true,
                maxFileCount: 10,//最大上传数量
                browseOnZoneClick: true,
                msgFilesTooMany: "选择上传的文件数量 超过允许的最大数值！",
                enctype: 'multipart/form-data',
                // overwriteInitial: false,//不覆盖已上传的图片
                allowedFileExtensions : [ "jpg", "png", "gif" ],
                browseClass : "btn btn-primary", //按钮样式
                previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",
                layoutTemplates :{
                    actionDelete:'', //去除上传预览的缩略图中的删除图标
                    // actionUpload:'',//去除上传预览缩略图中的上传图片；
                    actionZoom:''   //去除上传预览缩略图中的查看详情预览的缩略图标。
                },
            },

        )
    }).on('fileuploaded', function (event, data, previewId, index) {//异步上传成功结果处理
        //图片路径 data.response.success
        // vueApp.imgPath=data.response.success
        addPath(data.response.success)
    }).on('fileerror', function (event, data, msg) {//异步上传失败结果处理
        alert(data.response.success)
    }).on('fileuploaderror', function (event, data, msg) {//异步上传失败结果处理
        alert(data.response.success)
    })


    function addPath(path) {
        let list = vueApp.imgPath
        list.push(path)
        vueApp.imgPath = list
    }

</script>
</body>
</html>
